<template>
  <el-cascader class="cascader" v-model="deviceTypeId" :props="defaultProps" :options="treeList.currentTree"
    :placeholder="placeholder_text" @change="handleChange" clearable />
</template>

<script setup lang="ts">
import { dptQueryDptNoPage } from "@/http/userManage"
let deviceTypeId = ref(' ' as any);

interface Tree {
  // id: number
  value: string
  label: string
  children?: Tree[]
}

const props = defineProps({
  needAll: {
    type: Boolean,
    default: true,
  },
  placeholder_text: {
    type: String,
    default: " "
  }
  // selectData: {
  //   type: String,
  //   default: '' as any
  // }
})
// watch(() => props.selectData, (newValue, oldValue) => {
//   deviceTypeId.value = newValue

// });

//指定打开下一级方式为hover
const defaultProps = {
  expandTrigger: 'hover' as const
}

const assignValue = (data: any) => {
  deviceTypeId.value = data
}
const treeList = reactive({
  tree: [] as Array<Tree>,//系统/类别/类型/设备树形结构(element 所需要的格式)
  treeAndAll: [] as Array<Tree>,//系统/类别/类型/设备树形结构(element 所需要的格式 加了一个全部选项)
  list: [] as any,//系统/类别/类型/设备列表
  currentTree: [] as Array<Tree> //当前所需要的格式(有的需要全部,有的不需要)
})

const emit = defineEmits(['getDeviceTypeId', 'getTreeList']);
//所属系统/类别/类型/设备改变时
const handleChange = (val: any) => {
  if (val) {
    deviceTypeId.value = val[val.length - 1];
    let label = ''
    treeList.treeAndAll.forEach((option: any) => {
      if (option.value === val[0]) {
        label = option.label;
        if (val.length > 1) {
          val.slice(1).forEach((v: any) => {
            const child = option.children.find((c: any) => c.value === v);
            if (child) {
              label += "/" + child.label;
              option = child;
            }
          });
        }
      }
    });
    let data = {} as any
    data[deviceTypeId.value] = label
    emit('getDeviceTypeId', deviceTypeId.value, data);
  } else {
    emit('getDeviceTypeId', "", null);
  }

}

const getTreeList = () => {
  dptQueryDptNoPage().then((res: any) => {
    if (res && res.result && res.result) {
      treeList.list = res.result;
      let list_new: any = [];
      if (treeList.list.length > 0) {
        treeList.list.forEach((item: any, index: number) => {
          list_new.push({ value: item.id, label: item.name, children: [] })
          if (item.children && item.children.length > 0) {
            item.children.forEach((item2: any, index2: number) => {
              list_new[index].children.push({ value: item2.id, label: item2.name, children: [] })
              if (item2.children && item2.children.length > 0) {
                item2.children.forEach((item3: any, index3: number) => {
                  list_new[index].children[index2].children.push({ value: item3.id, label: item3.name, children: [] })
                  if (item3.children && item3.children.length > 0) {
                    item3.children.forEach((item4: any, index4: number) => {
                      list_new[index].children[index2].children[index3].children.push({ value: item4.id, label: item4.name, children: [] })
                    });
                  }
                });
              }
            });
          }
        })
      }
      treeList.tree = list_new;
      treeList.treeAndAll = JSON.parse(JSON.stringify(list_new));
      //筛选条件加上全部,弹窗新增和编辑不需要全部选项
      treeList.treeAndAll.unshift({ value: " ", label: "全部", children: [] })
      // console.log('tree', treeList.tree);
      emit('getTreeList', treeList);
      if (props.needAll) {
        treeList.currentTree = treeList.treeAndAll;
      } else {
        treeList.currentTree = treeList.tree;
      }
    }
  })
}

getTreeList();

//清空
const empty = () => {
  deviceTypeId.value = " ";
}

//暴露方法,父组件才能调用
defineExpose({ empty, assignValue });
</script>

<style scoped lang="scss"></style>
